<template>
  <div class="info">
    <van-field v-model="text" label="联系人" />
    <van-field name="radio" label="性别">
      <template #input>
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1">先生</van-radio>
          <van-radio name="2">女士</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field v-model="tel" type="tel" label="手机号" />
    <van-field v-model="adress" type="adress" label="地址" />
    <van-field
      v-model="men"
      type="men"
      label="门牌号"
      placeholder="如：5号楼28室"
    />
    <van-field name="radio" label="标签">
      <template #input>
        <van-radio-group v-model="radio2" direction="horizontal">
          <van-radio name="1">公司</van-radio>
          <van-radio name="2">家</van-radio>
          <van-radio name="3">学校</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-cell-group>
      <van-switch-cell v-model="checked" title="默认地址" />
    </van-cell-group>
    <div class="btn">
      <van-button
        round
        type="primary"
        size="normal"
        color="gray"
        class="btn1"
        @click="del"
        >删除</van-button
      >
      <van-button round type="info" color="#6d87c4" class="btn2" @click="jump"
        >保存</van-button
      >
    </div>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
      ><Del @xiaoming="emitfun"></Del>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Field } from "vant";
import { SwitchCell } from "vant";

Vue.use(SwitchCell);
Vue.use(Field);
import Del from "@/components/lsc/del.vue";

export default {
  components: {
    Del,
  },
  methods: {
    del() {
      this.show = true;
    },
    emitfun(val) {
      console.log(val);
      this.show = val;
    },
    jump() {
      //   let username = this.text;
      //   let tel = this.tel;
      //   let adress = this.adress;
      //   let men = this.men;
      //   let radio = this.radio;
      //   console.log(username, tel, adress, men, radio);
      this.$router.push("/address");
    },
  },
  data() {
    return {
      tel: "",
      text: "",
      radio: "1",
      adress: "",
      men: "",
      radio2: "1",
      checked: false,
      show: false,
    };
  },
};
</script>

<style scoped>
.info {
  width: 90%;
  margin: 0 auto;
}
.btn {
  display: flex;
  justify-content: space-around;
  margin-top: 2.4rem;
}

.btn1,
.btn2 {
  width: 120px;
}
.btn1 span {
  color: #000;
}
</style>